<template>
    <link rel="stylesheet" href="/assets/css/profile.css" />

    <van-sticky>
        <van-nav-bar
            title="基本资料"
            left-text="返回"
            left-arrow
            @click-left="onBack"
        />
    </van-sticky>

    <div class="user">
        <div class="user-image">
            <img :src="business.avatar_cdn" alt="" />
        </div>
    </div>

    <div class="form" style="overflow: hidden">
        <van-form @submit="onSubmit" label-align="right" colon>
            <van-cell-group inset>
                <van-field
                    v-model="business.mobile"
                    name="mobile"
                    label="手机号"
                    placeholder="手机号"
                    :rules="[{ required: true, message: '请填写手机号' }]"
                />

                <van-field
                    v-model="business.nickname"
                    name="nickname"
                    label="姓名"
                    placeholder="姓名"
                    :rules="[{ required: true, message: '请填写姓名' }]"
                />

                <van-field
                    v-model="business.email"
                    name="email"
                    label="邮箱"
                    placeholder="邮箱"
                    :rules="[{ required: true, message: '请填写邮箱' }]"
                />

                <van-field
                    v-model="business.password"
                    type="password"
                    name="password"
                    label="密码"
                    placeholder="密码为空即不修改"
                />

                <van-field
                    label="性别"
                    v-model="business.gender_text"
                    is-link
                    readonly
                    placeholder="选择性别"
                    @click="showGender = true"
                >
                    
                </van-field>

                <van-popup v-model:show="showGender" :style="{ height: '45%' }" round position="bottom">
                    <van-picker
                        title="选择性别"
                        :columns="genderList"
                        @confirm="onGenderConfirm"
                        @cancel="showGender = false"
                    />

                </van-popup>

                <van-field
                    v-model="business.region_text"
                    is-link
                    readonly
                    label="地区选择"
                    placeholder="点击选择省市区"
                    @click="showRegion = true"
                    :rules="[{ required: true, message: '请选择地区' }]"
                />

                <van-popup v-model:show="showRegion" round position="bottom">
                    <van-area
                        :area-list="areaList"
                        @confirm="onRegionConfirm"
                        @cancel="showRegion = false"
                    />
                </van-popup>


                <van-field name="avatar" label="头像">
                    <template #input>
                        <van-uploader v-model="avatar" max-count="1" />
                    </template>
                </van-field>

            </van-cell-group>
            <div style="margin: 16px">
                <van-button round block type="primary" native-type="submit">
                    提交
                </van-button>
            </div>
        </van-form>
    </div>
</template>

<script setup>
import { areaList } from '@vant/area-data';
const { proxy } = getCurrentInstance();

const business = ref(proxy.$business.value);

const avatar = ref([
    {
        url:business.value.avatar_cdn
    }
])

const showRegion = ref(false);
const showGender = ref(false);
const genderList = ref([
    {text:'保密',value:0},
    {text:'男',value:1},
    {text:'女',value:2}
])

// 表单提交事件
const onSubmit = async (values) => {
    let data = {
        id:business.value.id,
        mobile:values.mobile,
        nickname:values.nickname,
        email:values.email,
        gender:business.value.gender,
        province:business.value.province,
        city:business.value.city,
        district:business.value.district
    }

    if(values.password)
    {
        data.password = values.password;
    }

    let avatar = values.avatar[0]?.file;

    if(avatar)
    {
        data.avatar = avatar;
    }

    let result = await proxy.$upload({
        url:'business/base/profile',
        params:data
    })

    if(result.code === 1)
    {
        proxy.$successNotify({
            message:result.msg,
            onClose:() => {
                proxy.$cookies.set('business',result.data);

                proxy.$router.push('/business/base/index');
            }
        })

        return false;
    }else{
        proxy.$warnNotify(result.msg);

        return false;
    }
}

// 选择地区
const onRegionConfirm = ({_,selectedOptions}) => {
    let [province,city,district] = selectedOptions;

    let RegionText = '';

    if(province.value)
    {
        RegionText = province.text + '-';
        business.value.province = province.value
    }

    if(city.value)
    {
        RegionText += city.text + '-';
        business.value.city = city.value
    }

    if(district.value)
    {
        RegionText += district.text;
        business.value.district = district.value
    }

    business.value.region_text = RegionText;

    showRegion.value = false;
}

// 选择性别
const onGenderConfirm = ({_,selectedOptions}) => {

    if(selectedOptions.length <= 0)
    {
        return false;
    }

    business.value.gender = selectedOptions[0].value;
    business.value.gender_text = selectedOptions[0].text;

    showGender.value = false;
}

// 返回上一级
const onBack = () => {
    proxy.$router.back();
};
</script>
